<template>
  <div class="home-view">
    <h1>Vue 组件创建方式示例</h1>

    <!-- 1. 选项式API组件示例 -->
    <section class="demo-section">
      <h2>1. 选项式API (Options API)</h2>
      <div class="demo-description">
        <p><strong>特点：</strong></p>
        <ul>
          <li>类似Vue 2的写法，对Vue 2开发者友好</li>
          <li>代码按选项(data, methods, computed等)组织</li>
          <li>适合小型简单组件</li>
          <li>类型支持不如组合式API好</li>
        </ul>
      </div>

      <ButtonOptions text="选项式按钮" type="primary" @click="handleButtonClick" />
    </section>

    <!-- 2. 组合式API组件示例 -->
    <section class="demo-section">
      <h2>2. 组合式API (Composition API)</h2>
      <div class="demo-description">
        <p><strong>特点：</strong></p>
        <ul>
          <li>更好的逻辑复用能力</li>
          <li>更好的类型支持</li>
          <li>更灵活的逻辑组织方式</li>
          <li>适合复杂组件</li>
        </ul>
      </div>

      <CardComposition
        :title="cardTitle"
        :content="cardContent"
        :last-updated="lastUpdated"
        @expand="handleCardExpand"
      />
    </section>

    <!-- 3. script setup组件示例 -->
    <section class="demo-section">
      <h2>3. script setup 语法</h2>
      <div class="demo-description">
        <p><strong>特点：</strong></p>
        <ul>
          <li>更简洁的语法</li>
          <li>更好的IDE类型推断</li>
          <li>更少的样板代码</li>
          <li>Vue 3推荐写法</li>
        </ul>
      </div>

      <ListSetup :items="listItems" @select="handleItemSelect">
        <!-- 自定义列表项内容 -->
        <template #item="{ item, isSelected }">
          <div :class="{ 'selected-item': isSelected }">
            {{ item.name }} - {{ item.description }}
          </div>
        </template>

        <!-- 自定义空状态 -->
        <template #empty>
          <div class="empty-list">没有找到匹配的项目</div>
        </template>
      </ListSetup>
    </section>

    <!-- 4. 函数式组件示例 -->
    <section class="demo-section">
      <h2>4. 函数式组件</h2>
      <div class="demo-description">
        <p><strong>特点：</strong></p>
        <ul>
          <li>无状态、无实例</li>
          <li>渲染性能更好</li>
          <li>适合纯展示型简单组件</li>
          <li>不能使用响应式状态</li>
        </ul>
      </div>

      <div class="icon-row">
        <IconFunction type="success" />
        <IconFunction type="warning" />
        <IconFunction type="error" />
        <IconFunction type="info" />
      </div>
    </section>

    <!-- 5. 动态组件示例 -->
    <section class="demo-section">
      <h2>5. 动态组件</h2>
      <div class="demo-description">
        <p><strong>特点：</strong></p>
        <ul>
          <li>可以动态切换组件</li>
          <li>支持keep-alive缓存</li>
          <li>适合标签页、向导等场景</li>
        </ul>
      </div>

      <DynamicTabs ref="tabsRef" />
    </section>

    <!-- 6. 组件间通信示例 -->
    <section class="demo-section">
      <h2>6. 组件间通信</h2>
      <div class="demo-description">
        <p><strong>通信方式：</strong></p>
        <ul>
          <li>Props 向下传递数据</li>
          <li>Events 向上传递消息</li>
          <li>Provide/Inject 跨层级通信</li>
          <li>Refs 访问子组件实例</li>
          <li>状态管理(Pinia) 全局状态</li>
        </ul>
      </div>

      <div class="communication-demo">
        <div>
          <h3>父组件状态: {{ parentMessage }}</h3>
          <input v-model="parentMessage" />
        </div>

        <ButtonOptions text="通过ref调用子组件方法" @click="callChildMethod" />
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import ButtonOptions from '@/components/ButtonOptions.vue'
  import CardComposition from '@/components/CardComposition.vue'
  import ListSetup from '@/components/ListSetup.vue'
  import IconFunction from '@/components/IconFunction.vue'
  import DynamicTabs from '@/components/DynamicTabs.vue'

  // 1. 选项式API组件相关状态
  const handleButtonClick = (event: MouseEvent) => {
    console.log('按钮点击:', event)
  }

  // 2. 组合式API组件相关状态
  const cardTitle = ref('组合式卡片')
  const cardContent = ref('这是一个使用组合式API创建的卡片组件')
  const lastUpdated = ref(new Date())

  const handleCardExpand = (isExpanded: boolean) => {
    console.log('卡片状态:', isExpanded ? '展开' : '收起')
  }

  // 3. script setup组件相关状态
  const listItems = ref([
    { id: 1, name: '项目1', description: '第一个项目' },
    { id: 2, name: '项目2', description: '第二个项目' },
    { id: 3, name: '项目3', description: '第三个项目' },
  ])

  const handleItemSelect = (item: any) => {
    console.log('选中项目:', item)
  }

  // 4. 动态组件相关状态
  const tabsRef = ref<InstanceType<typeof DynamicTabs>>()

  const callChildMethod = () => {
    if (tabsRef.value) {
      tabsRef.value.switchTab('list')
      console.log('已通过ref调用子组件方法')
    }
  }

  // 5. 组件通信相关状态
  const parentMessage = ref('父组件消息')

  // 生命周期钩子
  onMounted(() => {
    console.log('HomeView 已挂载')
  })
</script>

<style scoped>
  .home-view {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }

  .demo-section {
    margin-bottom: 40px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
  }

  .demo-description {
    background: #0f807a;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 15px;
  }

  .icon-row {
    display: flex;
    gap: 20px;
    padding: 10px;
  }

  .communication-demo {
    display: flex;
    gap: 20px;
    align-items: center;
  }

  .empty-list {
    padding: 20px;
    text-align: center;
    color: #666;
  }

  .selected-item {
    font-weight: bold;
    color: #2196f3;
  }
</style>
